import { View, Text, Input, Image, Form, Button } from "@tarojs/components";
import { useState, useEffect,useRef } from "react";
import { useSelector, useDispatch } from 'react-redux'
import Taro from '@tarojs/taro'
import './index.less'
import searchSvg from '../../assets/images/search.svg'
import NavBar from "../navbar/NavBar";


export default function HooksPage() {
  // 声明一个叫 "count" 的 state 变量
  let [count, setCount] = useState(0);
  const [value, setValue] = useState(null)

  const form = useRef(null)

  const title = useSelector(state => state.users.title)
  const dispatch = useDispatch();
  const getCircularIcon = (vlaues) => {
    dispatch({
      type: `picture/getCircularIcon`,
      payload: vlaues
    })
  }

  useEffect(() => {
    getCircularIcon({})
    // form.current.TaroElement.childNodes
    console.log(form?.current?.TaroElement?.childNodes,'form');
  }, [])

  const onChange = (value) => {
    console.log(value);
  }

  const onActionClick = (value) => {
    console.log('开始搜索')
  }
  const onSubmit = (e)=>{
    const values = e.detail.value
    console.log(values);
  }
  const changeOrderData = (e)=>{
    console.log(e);
    // let order_data = this.data.orderData;
    // let data_type = e.target.dataset.type;
    // let value = e.detail.value;
    // order_data[data_type] = value;
    // this.setData({
    //   'orderData': order_data
    // })

  }
  return (
    <>
      <NavBar
        background="red"
        color="#fff"
        iconTheme="white"
        // back={true}
        // home={true}
        renderCenter={
          <View
            className="trace-rowAlignCenter"
          >
            <View className="my-index-selse-warp">
              <View className="my-index-selse-icon">侠客明</View>
              <View className="my-index-selse-input">
                {/* <View className="my-index-selse-left">左</View> */}
                <Input placeholder="请搜索" />
                <View className="my-index-selse-rigth">
                  <Image src={searchSvg} />
                </View>
              </View>
            </View>
          </View>
        }
      />
      <Form onSubmit={onSubmit} ref={form} onReset={changeOrderData}>
        <Input payload='请输入' name="input1"  bindinput={()=>changeOrderData()} ></Input>
        <Button type="primary" formType="submit" >提交</Button>
        <Button formType='reset'>测试</Button>
      </Form>
    </>
  );
}


